<template>
  <div class="root">
    <wux-popup
      closable
      :visible="showSuccessDialog"
      content="领取成功!"
      @close="closeSuccessDialog"
      @closed="toIndexPage"
    >
      <button class="back-index" @click="closeSuccessDialog">返回首页</button>
    </wux-popup>
    <wux-popup position="bottom" :visible="showLoginDialog" @close="closeLoginDialog">
      <div class="pop-container">
        <p class="title">微信授权提示</p>
        <p class="content">请点击授权按钮获取微信授权</p>
        <div class="author-btn-group">
          <button class="cancel" @click="closeLoginDialog">取消</button>
          <button class="authorize" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授权</button>
        </div>
      </div>
    </wux-popup>
    <wux-toptips id="wux-toptips" />
    <div class="per-container">
      <div class="head">
        <div class="head-top"></div>
        <div class="line">
          <div class="line-left"></div>
          <div class="line-right"></div>
        </div>
        <img class="l-logo" src="https://erp.0511mzone.com/upload/static/l-logo.png" />
      </div>
      <div class="body">
        <!-- <p class="title">新人用户注册</p>
        <p class="sub-title">您可领取新用户优惠券</p>-->
      </div>
      <div class="pic">
        <img class="pic-cdb" src="https://erp.0511mzone.com/upload/static/cdb.png" />
        <img class="right-content" src="https://erp.0511mzone.com/upload/static/wz.png" />
      </div>
      <div class="content">
        <div class="user-name user">
          <i class="icon-user iconfont user-icon"></i>
          <input
            :value="realName"
            placeholder="请输入您的姓名"
            placeholder-style="color: #65381a;letter-spacing:5px"
            @blur="onRealNameBlur"
          />
        </div>
        <div class="user-phone user">
          <i class="icon-phone iconfont user-icon"></i>
          <button
            v-if="getPhone"
            class="get-phone"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
          ></button>
          <input
            type="number"
            placeholder="请输入您的手机号码"
            placeholder-style="color: #65381a;letter-spacing:5px"
            :value="phoneNumber"
            @blur="onPhoneBlur"
          />
        </div>
        <div class="user-code">
          <div class="code">
            <div class="code-container">
              <i class="icon-yanzhengma iconfont user-icon"></i>
              <input
                type="number"
                placeholder="请输入短信验证码"
                placeholder-style="color: #65381a;letter-spacing:1px"
                :value="verCode"
                @blur="onVerCodeBlur"
              />
            </div>
          </div>
          <div
            class="get-code"
            :style="{pointerEvents : pointerEvents}"
            @click="vcode"
          >{{ c2 || "获取验证码" }}</div>
        </div>
      </div>
      <button class="upload" @click="getNow">立即领取</button>
    </div>
  </div>
</template>
<script>
import wxApi from "@/api/wx_api";
import systemApi from "@/api/system";

import { $wuxToptips, $wuxCountDown } from "../../static/wux/index";
export default {
  data() {
    return {
      pointerEvents: "auto",
      getPhone: true,
      c2: "",
      c: "",
      phoneNumber: "",
      showLoginDialog: false,
      code: "",
      realName: "",
      showSuccessDialog: false,
      verCode: "",
      tempUser: {},
    };
  },
  mounted() {
    if (JSON.stringify(this.$store.state.user) === "{}") {
      this.showLoginDialog = true;
    }
  },
  methods: {
    onRealNameBlur(e) {
      this.realName = e.target.value;
    },
    onVerCodeBlur(e) {
      this.verCode = e.target.value;
    },
    onPhoneBlur(e) {
      this.phoneNumber = e.target.value;
    },
    closeLoginDialog() {
      this.showLoginDialog = false;
    },
    bindGetUserInfo(e) {
      this.showLoginDialog = false;
      const self = this;
      wx.login({
        success(res) {
          if (res.code) {
            self.code = res.code;
            // console.log('回调事件后触发')
            if (e.mp.detail.userInfo) {
              console.log("用户按了允许授权按钮");
              let { encryptedData, userInfo, iv } = e.mp.detail;
              self.$http
                .post(wxApi.wxLogin, {
                  // 这里的code就是通过wx.login()获取的
                  code: res.code,
                  encryptedData,
                  iv,
                })
                .then((res) => {
                  self.tempUser = res;
                  console.log(`后台交互拿回数据:`, res);
                  // 获取到后台重写的session数据，可以通过vuex做本地保存
                  self.$store.commit("saveUser", res);
                  // self.$router.push({ path: '/pages/center', reLaunch: true });
                })
                .catch((err) => {
                  console.log(`api请求出错:`, err);
                });
            } else {
              //用户按了拒绝按钮
              console.log("用户按了拒绝按钮");
            }
          }
        },
      });
    },
    vcode() {
      let flag = this.checkPhone();
      if (!flag) {
        return false;
      }
      if (this.c2 && this.c.interval) return !1;
      let that = this;
      this.pointerEvents = "none";
      this.$http
        .post({
          url: systemApi.getCode,
          method: "POST",
          body: {
            openId: that.$store.state.user.openId,
            phone: that.phoneNumber,
          },
        })
        .then((res) => {
          that.pointerEvents = "auto";
          if (res.data.code === 1) {
            $wuxToptips().success({
              hidden: false,
              text: res.data.mess,
              duration: 3000,
              success() {},
            });
            that.c = new $wuxCountDown({
              date: +new Date() + 60000,
              onEnd() {
                that.c2 = "获取验证码";
              },
              render(date) {
                const sec = date.sec;
                if (date.sec !== 0) {
                  that.c2 = sec + " 秒 ";
                }
              },
            });
          }
        })
        .then((res) => {
          that.pointerEvents = "auto";
        });
    },
    checkPhone() {
      if (!/^1[0-9]{10}$/.test(this.phoneNumber)) {
        $wuxToptips().error({
          hidden: false,
          text: "手机号码有误，请重填",
          duration: 1000,
          success() {},
        });
        return false;
      }
      return true;
    },
    getPhoneNumber(e) {
      this.getPhone = false;
      const self = this;
      wx.login({
        success(res) {
          if (res.code) {
            self.wxGetPhone(
              res.code,
              e.mp.detail.errMsg,
              e.mp.detail.encryptedData,
              e.mp.detail.iv
            );
          }
        },
      });
    },
    wxGetPhone(code, errMsg, encryptedData, iv) {
      const self = this;
      self.$http
        .post(wxApi.getPhone, {
          code,
          errMsg,
          encryptedData,
          iv,
        })
        .then((res) => {
          self.phoneNumber = res.phoneNumber;
        })
        .catch((err) => {
          console.log(`自动请求api失败 err:`, err);
        });
    },
    getNow() {
      this.$http
        .post({
          url: systemApi.perfectUser,
          method: "POST",
          body: {
            openId: this.$store.state.user.openId,
            code: this.verCode,
            phone: this.phoneNumber,
            realName: this.realName,
          },
        })
        .then((res) => {
          if (res.data.code !== 0) {
            this.$set(this.tempUser, "realName", this.realName);
            this.$set(this.tempUser, "phone", this.phoneNumber);
            this.$store.commit("saveUser", this.tempUser);
            this.showSuccessDialog = true;
          }
        })
        .then((res) => {});
    },
    toIndexPage() {
      this.$router.push({ path: "/pages/index", reLaunch: true });
    },
    closeSuccessDialog() {
      this.showSuccessDialog = false;
    },
  },
};
</script>
<style scoped lang="less">
.root {
  font-family: microsoft yahei;
  padding: 10px;
  background-color: #c89f62;
  height: 100vh;
  box-sizing: border-box;
  .back-index {
    width: 100%;
    color: #fff;
    margin-top: 30px;
    background-color: #12da12;
  }
  .pop-container {
    padding: 5px;
    background-color: #fff;
    .title {
      width: inherit;
      text-align: center;
      font-size: 20px;
      margin: 5px 0 20px 0;
      font-weight: 600;
    }
    .content {
      width: inherit;
      text-indent: 2;
      font-size: 16px;
      margin: 0 0 20px 0;
      font-weight: 400;
    }
    .author-btn-group {
      display: flex;
      justify-content: space-between;
    }
    button {
      flex-basis: 48%;
      height: 40px;
      padding: 10px 20px;
      letter-spacing: 4px;
      line-height: 19px;
    }
    .cancel {
      background: #fff0;
      color: #252525;
      border: 1px solid #252525;
    }
    .authorize {
      background: #12da12;
      color: #fff;
      border: 1px solid #12da12;
    }
  }
  .per-container {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border: 2px solid #252525;
    background-image: url(https://erp.0511mzone.com/upload/static/bg.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: 30% 100%;
    .head {
      .head-top {
        width: 15%;
        height: 10px;
        margin: 0 auto;
        background-color: #252525;
      }
      .line {
        height: 40px;
        .line-left {
          height: 0px;
          border: 1px solid #252525;
          width: 45px;
          margin: 18px 36%;
          position: absolute;
          transform: rotate(125deg);
          -o-transform: rotate(125deg);
          -moz-transform: rotate(125deg);
          -webkit-transform: rotate(125deg);
        }
        .line-right {
          height: 0px;
          border: 1px solid #252525;
          width: 45px;
          margin: 18px 46%;
          position: absolute;
          transform: rotate(55deg);
          -o-transform: rotate(55deg);
          -moz-transform: rotate(55deg);
          -webkit-transform: rotate(55deg);
        }
      }
    }
    .l-logo {
      height: 45px;
      width: 125px;
      margin: 0 auto;
      display: block;
    }
    .body {
      text-align: center;
      margin: 20px auto 5px;
      background-image: url(https://erp.0511mzone.com/upload/static/font.png);
      width: 65%;
      height: 86px;
      background-repeat: no-repeat;
      background-size: 100%;
      // .title {
      //   color: #65381a;
      //   font-size: 36px;
      //   font-weight: 600;
      // }
      // .sub-title {
      //   color: #c89f62;
      //   font-size: 18px;
      //   font-weight: 400;
      // }
    }
    .pic {
      background-image: url(https://erp.0511mzone.com/upload/static/card.png);
      width: 75%;
      height: 126px;
      background-repeat: no-repeat;
      background-size: 100%;
      margin: 0 auto 20px;
      position: relative;
      .pic-cdb {
        height: 75px;
        width: 60px;
        position: absolute;
        top: 23px;
        left: 13px;
      }
      .right-content {
        height: 33px;
        width: 160px;
        position: absolute;
        top: 45px;
        right: 25px;
      }
    }
    .content {
      .user {
        width: 75%;
        margin: 10px auto;
        height: 45px;
        border-radius: 10px;
        background-color: #c89f62;
        border: 1px solid #65381a;
        color: #65381a;
        box-sizing: border-box;
        display: flex;
        .user-icon {
          color: #fff;
          line-height: 45px;
          font-size: 32px;
          margin: 0 5px;
          flex-grow: 1;
        }
        input {
          height: inherit;
          flex-grow: 9;
        }
      }
      .user-phone {
        position: relative;
        .get-phone {
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          height: 90rpx;
          border-radius: 10px;
          background-color: #fff0;
          z-index: 10;
        }
      }
      .user-code {
        width: 75%;
        display: flex;
        justify-content: space-between;
        margin: 5px auto;
        .code {
          flex-basis: 65%;
          .code-container {
            height: 45px;
            border-radius: 10px;
            background-color: #c89f62;
            border: 1px solid #65381a;
            color: #65381a;
            box-sizing: border-box;
            display: flex;
            .user-icon {
              color: #fff;
              line-height: 45px;
              font-size: 23px;
              margin: 0 11px;
              flex-grow: 1;
            }
            input {
              height: inherit;
              flex-grow: 9;
            }
          }
        }
        .get-code {
          flex-basis: 33%;
          font-size: 14px;
          display: block;
          white-space: nowrap;
          border-radius: 5px;
          overflow: hidden;
          height: 45px;
          line-height: 45px;
          padding: 0;
          text-align: center;
          background-color: #fff;
          border: 1px solid #65381a;
          color: #65381a;
        }
      }
    }
    .upload {
      margin-top: 30px;
      width: 40%;
      height: 35px;
      border-radius: 10px;
      padding-left: 18px;
      text-align: center;
      background-color: #c89f62;
      border: 1px solid #65381a;
      color: #65381a;
      font-weight: 600;
      letter-spacing: 8px;
      line-height: 34px;
    }
  }
}
</style>
